<template>
  <div>
    <div>
      <h1>欢迎光临vue开发的收银系统,水果店</h1>
      <h3>苹果10元/斤.折扣 8折</h3>
      <div>
        <span>请输入你要购买的斤数</span
        ><input type="number" v-model.number="form" />
      </div>
      <div><button @click="btn">结账买单</button></div>
      <p>结账单:总价:{{ ip }}元 折后价:{{ iq }} 元 省了:{{ iu }}元</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ip: 0,
      iq: 0,
      iu: 0,
      form: 0,
    };
  },
  methods: {
    btn() {
      this.ip = this.form * 10;
      this.iq = this.form * 10 * 0.8;
      this.iu = this.ip - this.iq;
    },
  },
};
</script>

<style>
</style>